import React, { useState ,FC }   from 'react';
import { Form, Input, Button, Checkbox, Select, Row, Col, } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { FormInstance } from 'antd/lib/form';


import { login,post} from '../../utils/request';
import './login.css';



type StateType = {
    isAccoutForm: boolean;
};

type ButtenTextAccoutPojo = {
    borderBottom: string;
    fontWeight: string;
}

type ButtenTextPhonePojo = {
    borderBottom: string;
    fontWeight: string;
}

interface ButtenTextProp{
    className:string,
    borderBottom:string,
    fontWeight:any,
    onClick:()=> void,
    text:string
}

const ButtenText = (props: ButtenTextProp) => {

    return <Button type="text" className={props.className} style={{ borderBottom: props.borderBottom, fontWeight: props.fontWeight }} onClick={props.onClick} >{props.text}</Button>

}

 interface LoginProps {

    setStateValue: (value :boolean)=> void ;
    // children :ReactNode ;
 }



const LoginDiv:FC<LoginProps> = ( {children ,setStateValue} ) => {




    const [buttenTextAccoutPojo, setButtenTextAccoutPojo] = useState<ButtenTextAccoutPojo>({
        borderBottom: '2px #264E7D solid',
        fontWeight: 'bold',
    });






    const [buttenTextPhonePojo, setButtenTextPhonePojo] = useState<ButtenTextPhonePojo>({
        borderBottom: '',
        fontWeight: '',
    });

    const setIsAccout = (val: boolean  ) => {        
        setStateValue(val)
        if (val) {
            setButtenTextAccoutPojo({
                borderBottom: '2px #264E7D solid',
                fontWeight: 'bold',
            })

            setButtenTextPhonePojo({
                borderBottom: '',
                fontWeight: '',
            })
        }else {

            setButtenTextAccoutPojo({
                borderBottom: '',
                fontWeight: '',
            })

            setButtenTextPhonePojo({
                borderBottom: '2px #264E7D solid',
                fontWeight: 'bold',
            })

        }


    }


    return (
        <div className='login'>
            <div id='accoutAndPhone' >
                <ButtenText className='accout' text='账号登入' borderBottom={buttenTextAccoutPojo.borderBottom} fontWeight={buttenTextAccoutPojo.fontWeight} onClick={() => setIsAccout(true)} />
                <ButtenText className='phone' text='验证码登入' borderBottom={buttenTextPhonePojo.borderBottom} fontWeight={buttenTextPhonePojo.fontWeight} onClick={ () => setIsAccout(false)} />
            </div>
            {children}
        </div>
    );
}
/**
 *   参数
 */
class Login extends React.Component<any, StateType> {


    formRef = React.createRef<FormInstance>();
  


    constructor(props: any) {
        super(props);
        //局部的 state
        this.state = {
            isAccoutForm: true,
        };
    }

    setStateValue = (val:boolean) =>{
        this.setState({
            isAccoutForm: val,
        })
    }

    //componentDidMount() 方法会在组件已经被渲染到 DOM 中后运行
    componentDidMount() {


    }

    //组件即将被移除dom时会触发
    componentWillUnmount() {
    }

    /**
     *  提交表单且数据验证成功后回调事件
     * @param values
     */
    onFinish = (values: any) => {
        values.grant_type = "defaultPcLogin"
        login(values).then((res: any) => {
            console.log(123, res);

            if (res && res.data.code === '200') {

                alert("登入成功")
            }
        }
        ).catch(

        );
    };

    phoneOnFinish = (values: any) => {
        console.log(values);

        values.grant_type = "defaultPcPhoneLogin"
        login(values);
    }

    authCode = () => {
    
      if(this.formRef.current){
        let phone =   this.formRef.current.getFieldValue('phone')
        let grant_type = "defaultPcPhoneLogin"

        post("/reslogin/phoneVerificationCode",{phone:phone,grantType:grant_type}).then((res:any)=>{


        }).catch((error:any)=>{

        })

      }
    }


  
       
    

    /**
     *  提交表单且数据验证失败后回调事件	
     * @param values
     */
    onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
        alert(errorInfo.errorFields[0].errors[0])
    };

    accoutForm = <Form
        name="normal_login"
        className="login-form"
        initialValues={{ remember: true }}
        onFinish={this.onFinish}

    >

        <Form.Item
            name="username"
            rules={[{ required: true, message: 'Please input your Username!' }]}
        >
            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" width='195px' />
        </Form.Item>


        <Form.Item
            name="password"
            rules={[{ required: true, message: 'Please input your Password!' }]}
        >
            <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="Password"
            />
        </Form.Item>

        <Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>记住我</Checkbox>
            </Form.Item>

            <a className="login-form-forgot" href="1">
                忘记密码
            </a>
        </Form.Item>

        <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button">
                登入
            </Button>
        </Form.Item>
    </Form>



    prefixSelector = (
        <Form.Item name="prefix" noStyle>
            <Select style={{ width: 70 }} defaultValue="86">
                <option value="86">+86</option>
                <option value="87">+87</option>
            </Select>
        </Form.Item>
    );


    phoneFrom = <Form
        name="normal_login"
        className="login-form"
        initialValues={{ remember: true }}
        onFinish={this.phoneOnFinish}
        ref={this.formRef}

    >
        <Form.Item
            name="phone"

            // label="Phone Number"
            rules={[{ required: true, message: '请输入手机号' }]}

        >
            <Input addonBefore={this.prefixSelector} style={{ width: '100%' }} placeholder="请输入手机号" />
        </Form.Item>

        <Form.Item style={{ height: '32px' }}>
            <Row gutter={5}>
                <Col span={13}>
                    <Form.Item
                        name="code"
                        style={{ width: '188px' }}
                        rules={[{ required: true, message: '请输入验证码' }]}
                    >
                        <Input placeholder="请输入验证码" />
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Button style={{ left: '27px' }}  onClick={this.authCode} >发送验证码</Button>
                </Col>
            </Row>
        </Form.Item>
        <Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>记住我</Checkbox>
            </Form.Item>

            <a className="login-form-forgot" href="1">
                忘记密码
            </a>
        </Form.Item>

        <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button" >
                登入
            </Button>
        </Form.Item>
    </Form>



    render() {
        return (
            <LoginDiv setStateValue={this.setStateValue}>
                 {this.state.isAccoutForm ? this.accoutForm : this.phoneFrom}
            </LoginDiv>
        );
    }

};


export default Login;


